<template>
<h1>双列表互选功能</h1>
  <div class="content">
    <div class="left">
        <div v-for="(item,index) in content">
          <li @click="check(item,index)">{{item.name}}</li>
          <br/>
        </div>
    </div>
    <div class="right">
      <div v-for="(item,index) in checkedBox">
        <li @click="uncheck(item,index)">{{item.name}}</li>

        <br/>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "DoubleList",
  data(){
    return{
      content:[
        {id:1,name:"1"},
        {id:2,name:"2"},
        {id:3,name:"3"},
        {id:4,name:"4"},
        {id:5,name:"5"},
        {id:6,name:"6"},
      ],
      checkedBox:[
      ]
    }
  },
  methods:{
    check(item,index){
      this.checkedBox.push(item);
      this.content.splice(index,1)
    },
    uncheck(item,index){
      this.content.push(item);
      this.checkedBox.splice(index,1)
    },
  }
}
</script>

<style scoped>
.content{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  margin: 0 auto;
  width: 80%;
  border: #111111 solid 1px;
}
.left{
  width: 50%;
  flex: 1;
  border-right: #111111 solid;
}
.right{
  width: 50%;
  flex: 1;
}
</style>